<template>
  <div>
    <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
      <span style="line-height: 60px;font-size: 20px;">部门管理</span>
    </div>
    <div style="display: flex">
      <!-- 左侧部门树 -->
      <el-card style="margin: 20px;width: 25%;">
        <h3 style="padding: 20px; text-align: center;">部门结构</h3>
        <el-tree
            ref="deptTree"
            :data="departmentsList"
            :props="treeProps"
            @check="handleCheckChange"
            show-checkbox
            node-key="id"
            :check-strictly="true"
            default-expand-all
            style="height: calc(100vh - 500px); overflow-y: auto;">
          <template #default="{ node }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span v-if="node.data.manager_name" style="color:#999;margin-left:10px">
                ({{ node.data.manager_name }})
              </span>
            </span>
          </template>
        </el-tree>
      </el-card>

      <!-- 右侧员工列表 -->
      <el-card style="margin: 20px; padding: 20px; width: 75%;">
        <el-table :data="employeesList" style="width: 100%">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="gender" label="性别" align="center"></el-table-column>
          <el-table-column prop="entryDate" label="入职时间" align="center"></el-table-column>
          <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Message } from 'element-ui';

export default {
  data() {
    return {
      departmentsList: [],
      treeProps: {
        label: 'name',
        children: 'children'
      },
      selectedDeptIds: [],
      employeesList: []
    };
  },
  mounted() {
    this.loadDepartments();
  },
  methods: {
    // 加载部门树数据
    loadDepartments() {
      axios.get(this.$BASE_URL + '/v1/department/list')
          .then((res)=>{
            if (res.data.state === 2000) {
              this.departmentsList = this.buildTree(res.data.data);
            }else{
              Message.error(res.data.message);
            }
          })
    },

    // 构建树形结构
    buildTree(list) {
      const map = {};
      const tree = [];
      list.forEach(item => {
        map[item.id] = { ...item, children: [] };
      });
      list.forEach(item => {
        const parent = map[item.parentId];
        if (parent) {
          parent.children.push(map[item.id]);
        } else {
          tree.push(map[item.id]);
        }
      });
      return tree;
    },

    // 处理勾选变化
    handleCheckChange(checkedNodes, { checkedKeys }) {
      this.selectedDeptIds = checkedKeys;
      this.loadEmployees();
    },

    // 加载员工数据
    async loadEmployees() {
      if (this.selectedDeptIds.length === 0) {
        this.employeesList = [];
        return;
      }

      axios.get(this.$BASE_URL + '/v1/user/departmentList/'+this.selectedDeptIds.join(','))
          .then(res => {
            if (res.data.state === 2000) {
              this.employeesList = res.data.data;
            }else{
              Message.error(res.data.message);
            }
          });
    },
  }
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>